<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>AppInfoParser Demo</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      font-size: 12px;
      background: #fff;
    }

    p {
      padding: 0;
      margin: 0;
    }

    .container {
      width: 450px;
      margin: 20px auto;
    }

    .title {
      border-left: 4px solid #78C3F3;
      padding-left: 12px;
      font-size: 16px;
      margin: 0 0 20px 0;
    }

    .card {
      padding: 20px;
      margin-bottom: 20px;
      background: #fff;
      border-radius: 4px;
      font-size: 12px;
      transition: all .3s;
      border: 1px solid #d9d9d9;
      border-color: #e9e9e9;
    }

    .card:hover {
      box-shadow: 0 1px 6px hsla(0, 0%, 39%, .2);
      border-color: #eee;
    }

    .file {
      position: relative;
      border: 1px solid #99D3F5;
      border-radius: 2px;
      width: 85px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #1E88C7;
    }

    .file:hover {
      background: #AADFFD;
      border-color: #78C3F3;
      color: #004974;
      text-decoration: none;
    }

    #file-input {
      position: absolute;
      top: 0;
      left: 0;
      width: 85px;
      height: 30px;
      opacity: 0;
    }

    #file-input:hover {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="card">
      <p class="title">选择你的软件包</p>
      <div class="file">上传软件包
        <input type="file" name="file" id="file-input" onchange="fileSelect()">
      </div>
    </div>
    <div id="result-list">
    </div>
  </div>
  <script src="./app-info-parser.js"></script>
  <script>
    function fileSelect() {
      const files = document.getElementById('file-input').files;
      try {
        const parser = new AppInfoParser(files[0]);
        parser.parse().then(result => {
          const div = document.createElement('div')
          // console.log(result);
          // console.log(result.application.label);
          div.innerHTML = `
            <div style="padding: 20px; margin-bottom: 10px; background: #fff; border-radius: 4px; font-size: 16px; color: #717171; border: 1px solid #d9d9d9; border-color: #e9e9e9;">
              <p style="padding: 10px 0; display: flex; overflow: hidden;">
                <span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">File Name: </span>
                <span style="width: 0; flex: 1; overflow-wrap: break-word; word-wrap: break-word;">${files[0].name}</span>
              </p>
              <p style="padding: 10px 0; display: flex; overflow: hidden;">
                <span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">App Icon: </span>
                <img style="width: 80px; height: 80px;" src="${result.icon}" alt="">
              </p>
              <p style="padding: 10px 0; display: flex; overflow: hidden;">
                <span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">Package: </span>
                <span style="width: 0; flex: 1; overflow-wrap: break-word; word-wrap: break-word;">${result['package'] || result['CFBundleName']}</span>
              </p>
              <p style="padding: 10px 0; display: flex; overflow: hidden;">
                <span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">Version: </span>
                <span style="width: 0; flex: 1; overflow-wrap: break-word; word-wrap: break-word;">${result['versionName'] || result['CFBundleShortVersionString']}</span>
              </p>
              <p style="padding: 10px 0; display: flex; overflow: hidden;">
                <span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">App Name: </span>
                <span style="width: 0; flex: 1; overflow-wrap: break-word; word-wrap: break-word;">${result.application.label}</span>
              </p>
            </div>
          `
          document.getElementById('result-list').appendChild(div)
        }).catch(e => {
          window.alert('Parse Error: ' + e)
        })
      } catch (e) {
        window.alert('Parse Error: ' + e)
      }
    }
  </script>
</body>

</html>